import React, { useState, useCallback, useMemo } from 'react';
import { View, StyleSheet, FlatList, TouchableOpacity } from 'react-native';
import AntDesign from 'react-native-vector-icons/AntDesign';
import { 
  ResponsiveContainer,
  ResponsiveText,
  scale,
  Sizes 
} from '../components';

interface CartItem {
  id: number;
  name: string;
  price: number;
  quantity: number;
}

const initialCartItems: CartItem[] = [
  { id: 1, name: '商品1', price: 99, quantity: 1 },
  { id: 2, name: '商品2', price: 199, quantity: 2 },
  { id: 3, name: '商品3', price: 299, quantity: 1 },
];

const CartScreen = () => {
  const [items, setItems] = useState<CartItem[]>(initialCartItems);

  // 使用 useMemo 缓存总价计算
  const totalPrice = useMemo(() => {
    return items.reduce((sum, item) => sum + item.price * item.quantity, 0);
  }, [items]);

  // 使用 useCallback 优化函数
  const updateQuantity = useCallback((id: number, delta: number) => {
    setItems(prevItems =>
      prevItems.map(item =>
        item.id === id
          ? { ...item, quantity: Math.max(1, item.quantity + delta) }
          : item
      )
    );
  }, []);

  // 优化渲染性能
  const renderItem = useCallback(({ item }: { item: CartItem }) => (
    <View style={styles.cartItem}>
      <View style={styles.checkbox}>
        <AntDesign name="checkcircle" size={scale(20)} color="#4CAF50" />
      </View>
      <View style={styles.itemImage} />
      <View style={styles.itemDetails}>
        <ResponsiveText variant="medium" style={styles.itemName}>{item.name}</ResponsiveText>
        <ResponsiveText variant="medium" weight="bold" style={styles.itemPrice}>
          ¥{item.price.toFixed(2)}
        </ResponsiveText>
        <View style={styles.quantityControl}>
          <TouchableOpacity
            style={styles.quantityButton}
            onPress={() => updateQuantity(item.id, -1)}>
            <ResponsiveText variant="large" style={styles.quantityButtonText}>-</ResponsiveText>
          </TouchableOpacity>
          <ResponsiveText variant="medium" style={styles.quantity}>{item.quantity}</ResponsiveText>
          <TouchableOpacity
            style={styles.quantityButton}
            onPress={() => updateQuantity(item.id, 1)}>
            <ResponsiveText variant="large" style={styles.quantityButtonText}>+</ResponsiveText>
          </TouchableOpacity>
        </View>
      </View>
    </View>
  ), [updateQuantity]);

  return (
    <ResponsiveContainer>
      <View style={styles.container}>
        <FlatList
          data={items}
          keyExtractor={item => item.id.toString()}
          renderItem={renderItem}
          showsVerticalScrollIndicator={false}
          initialNumToRender={4}
          maxToRenderPerBatch={10}
          windowSize={5}
        />

        <View style={styles.footer}>
          <View style={styles.selectAll}>
            <AntDesign name="checkcircle" size={scale(20)} color="#4CAF50" />
            <ResponsiveText variant="medium" style={styles.selectAllText}>全选</ResponsiveText>
          </View>
          <View style={styles.totalContainer}>
            <ResponsiveText variant="medium" style={styles.totalText}>
              合计: <ResponsiveText variant="medium" weight="bold" style={styles.totalPrice}>
                ¥{totalPrice.toFixed(2)}
              </ResponsiveText>
            </ResponsiveText>
            <TouchableOpacity style={styles.checkoutButton}>
              <ResponsiveText variant="medium" color="#fff" style={styles.checkoutButtonText}>
                结算
              </ResponsiveText>
            </TouchableOpacity>
          </View>
        </View>
      </View>
    </ResponsiveContainer>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f5f5f5',
  },
  cartItem: {
    flexDirection: 'row',
    padding: Sizes.spacingMedium,
    backgroundColor: '#fff',
    marginBottom: Sizes.spacingRegular,
    alignItems: 'center',
  },
  checkbox: {
    marginRight: Sizes.spacingRegular,
  },
  itemImage: {
    width: scale(80),
    height: scale(80),
    backgroundColor: '#e0e0e0',
    borderRadius: Sizes.borderRadiusSmall,
    marginRight: Sizes.spacingMedium,
  },
  itemDetails: {
    flex: 1,
  },
  itemName: {
    marginBottom: Sizes.spacingTiny,
  },
  itemPrice: {
    color: '#f50',
    marginBottom: Sizes.spacingRegular,
  },
  quantityControl: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  quantityButton: {
    width: scale(28),
    height: scale(28),
    backgroundColor: '#f0f0f0',
    borderRadius: scale(14),
    justifyContent: 'center',
    alignItems: 'center',
  },
  quantityButtonText: {
    color: '#333',
  },
  quantity: {
    marginHorizontal: Sizes.spacingMedium,
  },
  footer: {
    flexDirection: 'row',
    padding: Sizes.spacingMedium,
    backgroundColor: '#fff',
    alignItems: 'center',
    borderTopWidth: 1,
    borderTopColor: '#e0e0e0',
  },
  selectAll: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  selectAllText: {
    marginLeft: Sizes.spacingRegular,
  },
  totalContainer: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'flex-end',
    alignItems: 'center',
  },
  totalText: {
    marginRight: Sizes.spacingMedium,
  },
  totalPrice: {
    color: '#f50',
  },
  checkoutButton: {
    backgroundColor: '#f50',
    borderRadius: scale(20),
    paddingVertical: Sizes.spacingSmall,
    paddingHorizontal: Sizes.spacingXL,
  },
  checkoutButtonText: {
    color: '#fff',
  },
});

export default CartScreen; 